<style scoped>

</style>

<template>
    <div id="mailDetail">
        <h3 id="h_mail" v-if="mail.title">邮件标题：{{mail.title}}</h3>
        <h3 id="h_mail" v-if="mail.fromUser">发件人：{{mail.fromUser}}</h3>
        <h3 id="h_mail" v-if="mail.ccUser">抄送：{{mail.ccUser}}</h3>
        <h3 id="h_mail" v-if="mail.receiveTime">接收时间：{{getReceiveTime}}</h3>
        <!-- bidirectional data binding（双向数据绑定） -->
        <quill-editor v-model="mail.htmlContent" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)">
        </quill-editor>
        <h3 id="h_mail" v-if="mail.attachments">附件列表</h3>
    </div>
</template>

<script>
export default {
    name: 'MailDetail',
    data() {
        return {
            isLoading: true,    //是否显示加载画面
            editorOption: {
                // 编辑器配置参数
            },
            mail: {
                //邮件
            },
        }
    },
    mounted: function () {
        var id = this.$route.params.id;
        console.log("邮件详情组件获取的邮件id：" + id);
        var url = "mail/detail/" + id;
        this.$http.get(url).then(res => {
            var jsonResponse = res.data;
            if (jsonResponse.returnCode === '0') {
                //请求成功
                this.mail = jsonResponse.returnData;
                this.isLoading = false;
            } else {
                //请求失败了！
            }

        });
    },
    // if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
        onEditorChange({ editor, html, text }) {
            this.content = html
        }
    },
    // get the current quill instace object.
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill
        },
        //计算接收时间
        getReceiveTime() {
            var receiveTime = this.mail.receiveTime;
            if (receiveTime != null && receiveTime != undefined) {
                var date = new Date(receiveTime).toLocaleString();
                return date;
            }
        }
    }
}
</script>